<template>
  <div class="barrage">
    <div class="barragebox">
      <canvas id="myCanvas">your browser does not support the canvas tag </canvas>
    </div>
    <div class="clearfix msgbox">
      <div class="fl">
        <input type="text">
      </div>
      <div class="fr">
        <span>发送</span>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: "barrage",
    mounted: function () {

      this.drawConvas();
    },

    methods: {
      drawConvas: function () {
        this.canvas = document.getElementById("myCanvas");
        this.ctx = this.canvas.getContext("2d");
        this.msgs = new Array(5);
        this.width = 640;//canvas分辨率1280*720
        this.height = 340;
        this.canvas.width=this.width;
        this.canvas.height=this.height;
        this.font = "24px 黑体";
        this.ctx.font=this.font;
        this.colorArr=["Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue"];
        this.interval = "";
        this.draw = function () {
          if (this.interval != "")return;
          var _this=this;
          this.interval = setInterval(function () {
            _this.ctx.clearRect(0, 0, _this.width, _this.height);
            _this.ctx.save();
            for (var i = 0; i < _this.msgs.length; i++) {
              if (!(_this.msgs[i] == null || _this.msgs[i] == "" || typeof(_this.msgs[i]) == "undefined")) {
                if(_this.msgs[i].L==null || typeof(_this.msgs[i].L)=="undefined"){
                  _this.msgs[i].L=_this.width;
                  _this.msgs[i].T=parseInt(Math.random() * 1000);
                  _this.msgs[i].T=parseInt(Math.random() * 1000);
                  _this.msgs[i].S=parseInt(Math.random() * (10 - 4) + 4);
                  _this.msgs[i].C=_this.colorArr[Math.floor(Math.random() * _this.colorArr.length)];
                }else{
                  if(_this.msgs[i].L<-200){
                    _this.msgs[i]=null;
                  }else {
                    _this.msgs[i].L=parseInt(_this.msgs[i].L-_this.msgs[i].S);
                    _this.ctx.fillStyle =_this.msgs[i].C;
                    _this.ctx.fillText(_this.msgs[i].msg,_this.msgs[i].L,_this.msgs[i].T);
                    _this.ctx.restore();
                  }
                }
              }
            }
          }, 20);
        };
        //添加数据，数据格式[{"msg":"nihao"}]
        this.putMsg = function (datas) {
          for (var j = 0; j < datas.length; j++) {
            for (var i = 0; i < this.msgs.length; i++) {
              if (this.msgs[i] == null || this.msgs[i] == "" || typeof(this.msgs[i]) == "undefined") {
                this.msgs[i] = datas[j];
                break;
              }
            }
          }
          this.draw();
        };
        this.clear = function () {
          clearInterval(this.interval);
          this.interval="";
          this.ctx.clearRect(0, 0, this.width, this.height);
          this.ctx.save();
          for(var i=0;i<this.msgs.length;i++){
            this.msgs[i]=null;
          }
        };
        this.go()
      }, //drawCanvas
      go(){
        setInterval(() => {
          let datas=[{"msg":"123"},{"msg":"abc"},{"msg":"aaa"},{"msg":"bbb"},{"msg":"ccc"}]
          this.putMsg(datas);
        }, 100)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../style/public";
  @import "../style/setLess";

  .barragebox {
    width: 100%;
    height: 3.3rem;
    position: fixed;
    top: 0;
    left: 0;
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .msgbox {
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: .2rem 0rem;
    .fl {
      width: 80%;
      padding: 0 .15rem;
      input {
        padding-left: .1rem;
        border: none;
        width: 100%;
        height: .4rem;
        line-height: .4rem;
      }
    }
    .fr {
      width: 20%;
      padding: 0 .15rem;
      span {
        color: #fff;
        display: inline-block;
        height: .5rem;
        padding: 0 .3rem;
        border-radius: .5rem;
        line-height: .5rem;
        background: #22d374;
      }
    }
  }
</style>
